<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/commcss.css">
    <script src="static/js/jquery-3.5.1.js"></script>
    <style>
        body{
            background-size: cover;
            background-repeat: no-repeat;
        }

        .main{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        .form-div{
            width: 360px;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 5px lightgrey;
            background-color: #fff;
        }

        .layui-input{
            width: 100%;
            border: none;
        }

        .form-div input{
            border-bottom: 1px solid darkgray;
        }
        .form-div button{
            width: 100%;
            margin: 20px 0;
        }

    </style>

</head>
<body>

<div class="layui-container main">

    <div class="form-div login-div layui-anim layui-anim-upbit">
        <form action="" class="layui-form login" lay-filter="login">
            <div class="layui-form-item">
                <input type="text" name="phone" lay-verify="required" autocomplete="off" placeholder="手机号/邮箱" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="password" name="password" lay-verify="required"  placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" type="button" lay-submit lay-filter="login">登录</button>
            </div>
        </form>
    </div>
</div>
<script src="static/layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['element','layer','form','jquery'], function(){
        var  form = layui.form
            ,layer = layui.layer;

        form.on('submit(login)', function(data){
            var phone = $('.login-div input[name="phone"]').val();
            var pwd = $('.login-div input[type="password"]').val();
            var user = {phone:phone,password:pwd}
            console.log(user)
            $.post('/user/login',user,function (res) {
                if(res.code == 200){
                    window.location.href = "/sys/main"
                }else{
                    layer.msg(res.msg, {icon: 8,time:2000});
                }
            })
            return false;
        });
    });
</script>
<script>

    var windowH = window.innerHeight;
    $('body').css('height',windowH + 'px')
    $(window).resize(function () {
        windowH = window.innerHeight;
        $('body').css('height',windowH + 'px')
    })

</script>

</body>
</html>